<template>
	<div class="model" ref="test">
		<h2>详细价格参数<span @click="close">&times;</span></h2>
		<ul class="content">
			<li><span>吊牌价格:&nbsp;</span><span>¥199</span></li>
			<li><span>卖价:&nbsp;</span><span>¥133</span></li>
			<li><span>成本价:&nbsp;</span><span>¥199</span></li>
			<li><span>点币价:&nbsp;</span><span>¥199</span></li>
			<li><span>点分价:&nbsp;</span><span>¥199</span></li>
			<li><span>点币:&nbsp;</span><span>¥199</span></li>
			<li><span>点分:&nbsp;</span><span>¥199</span></li>
			<li><span>特价:&nbsp;</span><span>¥199</span></li>
			<li><span>特价点分:&nbsp;</span><span>¥199</span></li>
			<li><span>特价点币:&nbsp;</span><span>¥199</span></li>
		</ul>
	</div>
</template>

<script>
	export default {
		methods: {
			close() {
				this.$parent.showPriceModel = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.model {
		position: fixed;
		width: 600px;
		height: 500px;
		background: #fafafa;
		z-index: 999;
		border-radius: 15px;
		left: calc(50% - 300px);
		top: calc(50% - 250px);
		box-shadow: 0 0 10px #bbb;
		>h2 {
			padding: 1rem 2rem;
			border-bottom: 1px solid #ccc;
			display: flex;
			font-weight: normal;
			color: #555;
			span {
				margin-left: auto;
				cursor: pointer;
			}
			span:hover {
				color: #aaa;
			}
		}
	}
	.content {
		padding: 2rem;
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		color: #444;
		li {
			width: 33%;
			padding: 1rem 0;
			span:first-of-type {
				display: inline-block;
				min-width: 6rem;
			}
		}
	}
	


	
</style>